<template>
  <el-container class="home-container">
    <!-- 顶部 -->
    <el-header style="height:70px">
      <div class="header_div1">
        <img src="../assets/logo@2x.png" alt="" />
        <!-- <span>爱矿云</span> -->
      </div>
      <div class="header_div2">
        <!-- <span>安徽</span> -->
        <!-- <el-button type="danger" icon="el-icon-delete" circle></el-button> -->
        <el-button size="mini" type="success" icon="el-icon-switch-button" @click="back">退出</el-button
        >
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 菜单展开隐藏 -->
        <div class="aside_div1" @click="toggleCollapse">
          <span class="el-icon-s-fold" v-if="isOff"></span>
          <span class="el-icon-s-unfold" v-if="!isOff"></span>
        </div>
        <!-- 主菜单" -->
        <el-menu
          :default-active="NavState"
          router
          unique-opened
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#31dfc9"
        >
          <!-- <el-menu-item index="/yxCenterSq" @click="saveNavState(`/yxCenterSq`)">
            <i class="el-icon-bangzhu"></i>
            <span slot="title">运营中心申请</span>
          </el-menu-item>
          <el-menu-item index="/yxSqJl" @click="saveNavState(`/yxSqJl`)">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">运营申请记录</span>
          </el-menu-item> -->
          <el-menu-item index="/tbsh" @click="saveNavState(`/tbsh`)">
            <i class="el-icon-warning-outline"></i>
            <span slot="title">提币审核</span>
          </el-menu-item>
          <el-menu-item index="/cbjl" @click="saveNavState(`/cbjl`)">
            <i class="el-icon-s-grid"></i>
            <span slot="title">充币记录</span>
          </el-menu-item>
          <el-menu-item index="/tbjl" @click="saveNavState(`/tbjl`)">
            <i class="el-icon-date"></i>
            <span slot="title">提币记录</span>
          </el-menu-item>
          <el-menu-item index="/ggfb" @click="saveNavState(`/ggfb`)">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">公告发布</span>
          </el-menu-item>
          <el-menu-item index="/jtbl" @click="saveNavState(`/jtbl`)">
            <i class="el-icon-setting"></i>
            <span slot="title">静态变量设置</span>
          </el-menu-item>
          <el-menu-item index="/userInfo" @click="saveNavState(`/userInfo`)">
            <i class="el-icon-user"></i>
            <span slot="title">用户信息</span>
          </el-menu-item>
          <el-menu-item index="/teamInfo" @click="saveNavState(`/teamInfo`)">
            <i class="el-icon-user-solid"></i>
            <span slot="title">团队详情</span>
          </el-menu-item>
          <el-menu-item index="/gmjl" @click="saveNavState(`/gmjl`)">
            <i class="el-icon-goods"></i>
            <span slot="title">购买记录</span>
          </el-menu-item>
          <el-menu-item index="/syjl" @click="saveNavState(`/syjl`)">
            <i class="el-icon-coin"></i>
            <span slot="title">收益记录</span>
          </el-menu-item>
          <el-menu-item index="/yelr" @click="saveNavState(`/yelr`)">
            <i class="el-icon-money"></i>
            <span slot="title">余额录入</span>
          </el-menu-item>
          <el-menu-item index="/smrz" @click="saveNavState(`/smrz`)">
            <i class="el-icon-picture"></i>
            <span slot="title">实名认证</span>
          </el-menu-item>
          <!-- <el-menu-item index="/guamjl" @click="saveNavState(`/guamjl`)">
            <i class="el-icon-thumb"></i>
            <span slot="title">挂单记录</span>
          </el-menu-item> -->
          <el-menu-item index="/coinadmin" @click="saveNavState(`/coinadmin`)">
            <i class="el-icon-guide"></i>
            <span slot="title">币种管理</span>
          </el-menu-item>
          <el-menu-item index="/fileManage" @click="saveNavState(`/fileManage`)">
            <i class="el-icon-document"></i>
            <span slot="title">文件管理</span>
          </el-menu-item>
          
        </el-menu>
      </el-aside>
      <!-- 主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 底部 -->
    <el-footer>
      <div class="footer_div1">
        <span
          >矿盟中后台管理&nbsp;&nbsp;&nbsp;&nbsp;©2021-04</span
        >
      </div>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      isOff: true,
      NavState: "",
    };
  },
  created() {
    // this.getMenuList()
    // 获取激活选项
    this.NavState = window.sessionStorage.getItem("NavState");
  },
  methods: {
    //  退出账号
    async back() {
      // const {data:res} = await this.$http.post("logout")
      // if(res.code !==200) return console.log(res.msg)
      // this.$message.success(res.msg)
      window.sessionStorage.clear("token");
      this.$router.push("/login");
    },
    // 菜单栏展开隐藏
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      this.isOff = !this.isOff;
    },
    // 保存激活选项
    saveNavState(NavState) {
      window.sessionStorage.setItem("NavState", NavState);
      this.NavState = this.NavState;
    },
  },
};
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background: #4b8cf6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  .header_div1 {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      // width: 150px;
      height: 60px;
      margin-left: 50px;
      // border-radius: 50%;
    }
    span {
      margin-left: 15px;
      font-size: 16px;
    }
  }
  .header_div2 {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-right: 15px;
    }
  }
}
.el-aside {
  background: #545c64;
  .el-menu {
    border-right: none;
  }
  .aside_div1 {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    // background: #d2d2d2;
    background: #fff;
  }
}
.el-footer {
  background: #000;
  .footer_div1 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
}
</style>
